<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>执行上下文栈</title>
    <script>
        /**
         * 程序有3个执行上下文
         * window
         * bar的context
         * foo的context
         * 
         * 产生多个下文的管理：执行上下文栈
         * 全局代码执行前，js引擎会创建一个栈来保存所有的执行上下文
         * 但全局执行（window）上下文确定后，将其压入执行上下文栈中,window永远是栈底的元素
         * 函数调用时，执行上下文创建后，压入栈中
         * 当前函数执行完，栈顶的元素移除出栈
         * 所有代码都执行完了，栈中只剩下window
         */
        var a = 10
        
        var bar = function (x) {
            var b = 5
            foo(x + b)
        }
        
        var foo = function (y) {
            var c = 5
            console.log(a + c + y)
        }
        // 函数的定义与赋值，不代表函数执行，所以程序正确执行
        bar(10)
        
        
    </script>
    
    
</head>
<body>


</body>
</html>
